<template>
  <div>
    <!--
    <TagSelector :tags="tags" v-model:checkedTagIds="checkedTagIds" />
    <p>Selected Tag IDs: {{ checkedTagIds }}</p>-->
    <br />
    <!--
    <TagSelector :tags="tags2" v-model:checkedTagIds="checkedTagIds2" />
    <p>Selected Tag IDs: {{ checkedTagIds2 }}</p>-->
    <TagSelector :tags="tags2" v-model:checkedTagIds="checkedTagIds2" />
    <p>Selected Tag IDs: {{ checkedTagIds2 }}</p>
    <a-divider></a-divider>
    <a-pagination 
        v-model:current="currentPage"
        v-model:pageSize="pageSize"
        :total="totalRecords"
        @change="handlePageChange"
        show-less-items />
    
    <course-catalog
      :items="items"
      :progresses="progresses" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { ItemType } from 'ant-design-vue';
import { Tag } from '@/models/tag';
import TagSelector from '@/components/TagSelector.vue';
import { tagList, tagList2 } from '@/config/testdata';
import { courseInfo } from '@/config/course-videolist-with-dir';
import { base58Encode, base58Decode, unit8ArrayToString } from '@/utils/base58'; 
import CourseCatalog from '@/components/CourseCatalog.vue';

export default defineComponent({
  components: {
    TagSelector,
    CourseCatalog,
  },
  setup() {
    const tags: Tag[] = tagList;
    const checkedTagIds = ref<number[]>([]);

    const tags2: Tag[] = tagList2;
    const checkedTagIds2 = ref<number[]>([]);

    console.log("base58Encode('hello') = ", base58Encode("hello"))  // 返回"QmaR7"
    console.log("base58Decode('QmaR7') = ", unit8ArrayToString(base58Decode("QmaR7")))// 返回原始Uint8Array

    const successJson = `{"token":"069f8035-bc3e-4b07-af74-eea2afd33923","userId":1,"nickname":"13581696593","username":"acqs3381fh_2kljjl3fd","email":"aaa@aaa.aaa","phone":"1","status":1}`
    const successToken = `6YrvBwo2LxzSsmrTH9vpUkGKMboye6UdXtwbniBFEQVwHPhN3r81rxm4P9gzQzbGhDQrePm41DENrJuKBARTQSAi5C7R7sCnQXRnhKXswCA6tsA7ekg9qo4rs3pvDwqPkM6JogFVtyhY97edQH5nWH2n45f7WgmWj35Ak7kxi1Gs9cdaqDPe67cMctqtjfVBgTje2YdVUFssKtS8KmBg5rDzbwjYViC`
    const successUnit8Array = base58Decode(successToken);
    console.log("successJson = ", successJson)
    console.log("base58Encode(successJson) = ", base58Encode(successJson))
    console.log("base58Decode(successToken) = ", successUnit8Array);
    console.log("unit8ArrayToString(successUnit8Array) = ", unit8ArrayToString(successUnit8Array));
    console.log("unit8ArrayToString(successUnit8Array) == successJson ? ", unit8ArrayToString(successUnit8Array)==successJson);

    const errorJson = `{"status":0,"errorCode":"20000","errorMsg":"token失效，请重新从scent跳转"}`;
    const errorToken = `2zNubSCNs5h2mdMTmHtmTQokPY5SWbutWswg1VnJAyvo4bh4QeUQZyDUqDYnrgBgFfsASbyLpfxb3s3JQNCK2eKEtAzBUbwr3WXYMah2yVDzE7bNse`
    const errorUnit8Array = base58Decode(errorToken);
    console.log("errorJson = ", errorJson)
    console.log("base58Encode(errorJson) = ", base58Encode(errorJson))
    console.log("base58Decode(errorToken) = ", errorUnit8Array);
    console.log("unit8ArrayToString(errorUnit8Array) = ", unit8ArrayToString(errorUnit8Array));
    console.log("unit8ArrayToString(errorUnit8Array) == errorJson ? ", unit8ArrayToString(errorUnit8Array)==errorJson);

    const currentPage = ref(1);
    const pageSize = ref(20);
    const totalRecords = ref(210);
    const handlePageChange = (page: number, size: number) => {
      currentPage.value = page;
      pageSize.value = size;
    };

    const getItem = (
      label: string,
      key: string,
      icon?: any,
      children?: ItemType[],
      type?: 'group',
    ): ItemType => {
      return {
        key,
        icon,
        children,
        label,
        type,
      } as ItemType;
    }
    
    const progresses = ref({});
    progresses.value = {
      1: 10,
      3: 30,
      4: 40 ,
      8: 85,
    };
    const items = courseInfo.videoList;
    console.log("items = ", items)

    return {
      tags,
      tags2,
      checkedTagIds,
      checkedTagIds2,

      currentPage,
      pageSize,
      totalRecords,
      handlePageChange,

      items,
      progresses: progresses.value,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-pagination) {
  .ant-pagination-item {
    min-width: 44px;
    height: 44px;
    margin-inline-end: 10px;
    line-height: 44px;
    background-color: @white;
    border: 1px solid @border-red-light;
    border-radius: 50%;

    a {
      font-size: 14px;
      font-weight: 400;
    }

    &.ant-pagination-item-active {
      border: 1px solid #ED171F;
    }
  }
  .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
    min-width: 44px;
    height: 44px;
    color: @font-black;
    line-height: 44px;
    border: 1px solid @border-red-light;
    border-radius: 50%;
    margin-inline-end: 10px;

    a {
      font-size: 14px;
      font-weight: 400;
      border-radius: 50%;
    }
  }

  .ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination-next:hover .ant-pagination-item-link {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link {
    border-radius: 50%;
  }

  .ant-pagination-options {
    display: none;
  }
}
</style>